import React, { useState } from 'react'
import Taro, { useDidShow, usePullDownRefresh, useReachBottom  } from '@tarojs/taro'
import { View,  } from '@tarojs/components'
import {  AtCard, AtButton } from 'taro-ui'
import { request } from '@/utils'
import './index.less'

const Staff = () => {
  const [list, setList] = useState([])
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0) 
  const getList = async(index, flag) => {
    Taro.showLoading({mask: true})
    const data = await request({url: 'hkshihua/operator/myOperator', data: {pageIndex: index || page}})
    setList(flag ? [...list, ...data.list] : data.list)
    setTotal(data.total)
  }
  useDidShow(() => {
    setPage(1)
    getList(1)
  })
  usePullDownRefresh(async () => {
    setPage(1)
    await getList(1)
    Taro.stopPullDownRefresh()
  })
  useReachBottom(() => {
    if(page * 10 >= total) return
    setPage(page + 1)
    getList(page + 1, true)
  })
  const handleAdd = () => {
    Taro.navigateTo({
      url: '/pages/myStaff/StaffEdit/index'
    })
  }
  const handleEdit = (e) => {
    const { userId, account, name, pwd, supplierId } = e
    Taro.navigateTo({
      url: `/pages/myStaff/StaffEdit/index?userId=${userId}&account=${account}&name=${name}&pwd=${pwd}&supplierId=${supplierId}`
    })
  }
  return (
    <View>
        <View className='fleet-list'>
          {
            list.map((item) => {
              return (<View className='fleet-list_item' key={item.userId}>
              <AtCard
                title={item.name}
                thumb='http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG'
              >
                <View>
                  <View className='at-row _body _view_6p'>
                    <View className='at-col at-col-9 at-col--wrap _view_6p'>
                      <View className='at-row _body _view_6p'>
                        <View className='at-col at-col-3 at-col--wrap _view_6p'>
                          账号：
                        </View>
                        <View className='at-col at-col-9 at-col--wrap _view_6p'>
                          {item.account}
                        </View>
                      </View>
                      <View className='at-row _body _view_6p'>
                        <View className='at-col at-col-3 at-col--wrap _view_6p'>
                          密码:
                        </View>
                        <View className='at-col at-col-9 at-col--wrap _view_6p'>
                          {item.pwd}
                        </View>
                      </View>
                      <View className='at-row _body _view_6p'>
                        <View className='at-col at-col-3 at-col--wrap _view_6p'>
                          撬装站：
                        </View>
                        <View className='at-col at-col-9 at-col--wrap _view_6p'>
                          {item.supplierName}
                        </View>
                      </View>
                    </View>
                    <View className='at-col at-col-3 at-col--wrap btn-item'>
                      <View style=''>
                        <AtButton type='primary' size='small' onClick={() => handleEdit(item)}>编辑</AtButton>
                      </View>
                    </View>
                  </View>
                </View>
              </AtCard>
            </View>)
            })
          }
          {page * 10 >= total && <View className='no-data'>暂无更多数据</View>}
          <View style={{height: '90px'}}></View>
          <View className='add-more' onClick={handleAdd}>+</View>
        </View>
      </View >
  )
}
export default Staff